<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="content-Type" content="text/html; charset=utf-8" /> 
<title>Exam4j</title>
<link href="${basePath}/css/css-base.css" rel="stylesheet" type="text/css" />
<style>

body{
	font: 14px/30px "Lucida Grande", "Lucida Sans Unicode","\5FAE\8F6F\96C5\9ED1", Arial, Verdana, sans-serif ;
	-moz-user-select:none;
}

.top{
	width:100%;
	height:30px;
	border-bottom:1px solid #AAA;
	font-size:14px;
}
.header{
	margin:0 auto;
	width:962px;
}

.footer{
	width:100%;
	height:30px;
	border-top:1px solid #AAA;
	font-size:14px;
}
.top li a:{float:left;margin:4px;_margin-top: 8px;line-height: 31px;font-weight:bold}
.top li a:link {color:#868686;text-decoration:none;}
.top li a:visited {color:#868686;text-decoration:none;}
.top li a:hover {color:#C70707;}

.nav{float:left;}
.nav li {display:inline;margin:0 10px;}


.menu{float:right;text-align:center}
.menu li {display:inline;padding: 4px 8px;}

.container{
	margin:0 auto;
	width:960px;
	min-height:630px;
	_height:630px;
	border:0 1px 1px 1px;
	border-left:1px solid #E1E1E1;
	border-right:1px solid #E1E1E1;
	border-bottom:1px solid #E1E1E1;
	margin-bottom:20px;
}

.content{
	height:100%;
}

.box{
	font:bold 25px/40px "Microsoft YaHei",Tahoma,SimHei,arial,sans-serif;
	padding:20px 0;
}
.box-num{
	float:left;
	padding:0 10px;
	background-color:#EFEFEF;
	color:#AA0000;
}

.box-topic{
	float:right;
	width:880px;
	margin-bottom:20px;
	background-color:#FAFBFD;
}

.box-subject{
	padding:0 10px;
	background-color:#EFEFEF;
	color:#4D4D4D;
	margin-bottom:20px;
	
}

.box-score{
	margin-left:20px;
	color:#AA0000;
	font-size:16px;
}

.box-anwser{
	list-style-type: upper-alpha;
	padding-left:50px;
}
.box-anwser input{
	margin-left:40px;
	
}

.box-anwser li{
	vertical-align: bottom;
	margin:10px 0;
}

.box-anwser label{
	cursor:pointer;
}
.topic{
	
}

textarea{

	border:5px solid #DBE5F1;
}
.box-anwser li:hover {color:green;}

.progress{
    height:200px;
    position:absolute;
    top:100px;
    right:10px;
	width:24px;
	border:1px solid #000000;
	font-size:18px;
	line-height:20px;

}

.checked{
	background:#FDBF3B;
}
	
.progress .move,.blanker{width:24px;}
.progress .ruler{height:203px; width:24px;bottom:0px;}


.rtimer{
	font-size:14px;
}


.sausage-set {
    position: fixed; right: 0; top: 0;
    width: 15px; height: 100%;
    border-left: solid 2px #fff;
    border-right: solid 2px #fff;
    background-color: #fff;
}
    .sausage {
        position: absolute; left: 0;
        width: 100%; height: 100%;
        background-color: #f1f1f1;
        text-decoration: none;
        -moz-border-radius: 8px;
        -webkit-border-bottom-left-radius: 8px;
        -webkit-border-top-left-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -webkit-border-top-right-radius: 8px;
        -moz-box-shadow: inset 0px 1px 2px 4px rgba(0, 0, 0, 0.025);
        -webkit-box-shadow: inset 0px 1px 2px 4px rgba(0, 0, 0, 0.025);
        cursor: pointer;
    }
    .sausage-hover,
    .sausage-current {
        background-color: #f2e4ed;
        -moz-box-shadow: inset 0px 1px 2px 4px rgba(51, 63, 70, 0.025);
    }
        .sausage-span {
            position: absolute; right: 24px; top: 5px; z-index: 2;
            display: none;
            width: 100px;
            padding: 2px 3px;
            color: #000;
            background-color: #fff;
            border: solid 2px #990066;
            font-size: 10px; line-height: 12px; font-weight: bold; text-align: center;
            -moz-border-radius: 7px;
            -webkit-border-bottom-left-radius: 7px;
            -webkit-border-top-left-radius: 7px;
            -webkit-border-bottom-right-radius: 7px;
            -webkit-border-top-right-radius: 7px;
            -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.05);
            -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.05);
        }
        .sausage-hover .sausage-span,
        .sausage-current .sausage-span {
            display: block;
        }
.sausagejs {
	width: 520px;
	padding: 40px; margin: 50px auto;
	color: #fff;
	background-color: #2a2a2a;
	font-size: 15px; line-height: 20px;
	-moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.50);
}
.sausagejs .sausagejs-description {
	margin-bottom: 1.5em;
}
.sausagejs .sausagejs-code {
	font-family: Monaco, Consolas, "Lucida Console", monospace;
	font-size: 12px;
	line-height: 18px;
	color: #f79f9e;
	font-size: 12px;
	padding: 2px 0 2px 12px;
	border-left: 6px solid #f79f9e;
	margin: 0px 0 30px;
	background: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}
.sausagejs a {
	color: #fff;
	text-decoration: underline;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="${basePath}/js/jquery.ui.widget.js"></script>
<script src="${basePath}/js/jquery.sausage.js"></script>
<script>
$(document).ready(function(){     //使用jquery的ready方法似的加载运行


	$(window).sausage({
		content: function (i, $page) {
			return '<span class="sausage-span">' + $page.find('.anchor').first().text() + '</span>';
		}
	});
	$(document).bind({
		contextmenu: function(e){ 
			return false;
		},
		dbcick:function(e){
			return false;
		},
		mousemove :function(e){
			return false;
		}
	});
	

	
	if (!$.browser.msie) {
	   $("input[type='radio'],input[type='checkbox']").hide();
	}

	
	
	$("input[type='radio'],input[type='checkbox']").change(function(){
		var tmpname=$(this).attr("name");
        
		$("input[name='"+tmpname+"']").each(function(i,n) {
			$("label[for="+$(n).attr("id")+"]").removeClass("checked");
            if($(n).attr("checked")==true){
				$("label[for="+$(n).attr("id")+"]").addClass("checked");
			}
        });
        
		
		$.post("${basePath}/answer/selectChange.do",$(this).parents("form").serialize(),function(responseText)
        {
            console.log(responseText);
        },"text");
        
	});
	
	$("input[type='text']").focusout(function() {
		$.post("${basePath}/answer/inputChange.do",$(this).parents("form").serialize(),function(responseText)
        {
            console.log(responseText);
        },"text");
	});
		
});

</script>
</head>
<body onselectstart="return false" oncopy="return false;" oncut="return false;">
<div class="top">
	<div class="header">
		<ul class="nav">
			<li><a href="index.html">首页</a></li>
			<li><a href="radom.html">随便看看</a></li>
			<li>分类</li>
		</ul>
		<ul class="menu">
			<li><a href="profile.html">档案</a></li>
			<li><a href="exit.html">退出</a></li>
		</ul>
	</div>
</div>
<ul class="container">
	<#if questionMap??>

		<#list questionMap?keys as questionType>
			<div class="page">
			<a class="anchor" href="#choice"><h2 id="choice">${questionType}</h2></a>
			<#list questionMap[questionType] as question>
				<form method="post">
				<input type="hidden" name="questionId" value="${question.uid}"/>
				<#if (questionType=="单选题")>
					<li class="box">
						<div class="box-num">${question.questionNumber}</div>
						<div class="box-topic">
							<p class="box-subject">
								${question.question}
								<span class="box-score">${question.score}分</span>
							</p>
							<ol class="box-anwser">
								<#list question.candidateSelects as select>
								<li><label for="${select.uid}">${select.answer}</label><input name="answerArray" id="${select.uid}" type="radio" value="${select.uid}"/></li>
								</#list>
							</ol>
						</div>
						<div class="cb"></div>
					</li>
				</#if>
				
				<#if (questionType=="多选题")>
					<li class="box">
						<div class="box-num">${question.questionNumber}</div>
						<div class="box-topic">
							<p class="box-subject">
								${question.question}
								<span class="box-score">${question.score}分</span>
							</p>
							<ol class="box-anwser">
								<#list question.candidateSelects as select>
								<li><label for="${select.uid}">${select.answer}</label><input name="answerArray" id="${select.uid}" type="checkbox" value="${select.uid}"/></li>
								</#list>
							</ol>
						</div>
						<div class="cb"></div>
					</li>
				</#if>
				
				<#if (questionType=="判断题")>
					<li class="box">
						<div class="box-num">${question.questionNumber}</div>
						<div class="box-topic">
							<p class="box-subject">
								${question.question}
								<span class="box-score">${question.score}分</span>
							</p>
							<ol class="box-anwser">
								<#list question.candidateSelects as select>
								<li><label for="${select.uid}">${select.answer}</label><input name="answerArray" id="${select.uid}" type="radio" value="${select.uid}"/></li>
								</#list>
							</ol>
						</div>
						<div class="cb"></div>
					</li>
				</#if>
				
				<#if (questionType=="填空题")>
					<li class="box">
						<div class="box-num">${question.questionNumber}</div>
						<div class="box-topic">
							<p class="box-subject">
								${question.question}
								<span class="box-score">${question.score}分</span>
							</p>
							<ol class="box-anwser">
								<#list question.candidateInput as input>
								<li><input name="anwser" type="text" value=""/></li>
								</#list>
							</ol>
						</div>
						<div class="cb"></div>
					</li>
				</#if>
				
				<#if (questionType=="简答题")>
					<li class="box">
						<div class="box-num">${question.questionNumber}</div>
						<div class="box-topic">
							<p class="box-subject">
								${question.question}
								<span class="box-score">${question.score}分</span>
							</p>
							<p>
								<textarea name="anwser" rows="6" cols="100"></textarea>
							</p>
						</div>
						<div class="cb"></div>
					</li>
				</#if>
				</form>
			</#list>
			
			</div>
		</#list>
	</#if>
</ul>



<div class="footer">
	<a href="">交卷</a>
</div>
</body>
</html>